<template>
    <div>
        <form @submit.prevent="postComment" class="commit-input">
            <textarea class="input" v-model="newComment" placeholder="请输入评论内容"></textarea>
            <button class="send" type="submit"><img src="../assets//images/send.svg" alt=""></button>
        </form>
    </div>
</template>
  
<script>
import { ref } from 'vue';
import http from '../tools/axios';

export default {
    name: 'CommentForm',
    setup() {
        const newComment = ref('');
        const userId = localStorage.getItem('userId');
        const currentUrl = window.location.href;
        const cook_book_id = currentUrl.substring(currentUrl.lastIndexOf('/') + 1);

        const postComment = () => {
            // 发表新的评论
            http.post('/message/add', {
                "user_id": userId,
                "cook_book_id": cook_book_id,
                "content": newComment.value,
                "like_num": 0
            }).then((res) => {
                if (res.data.code === 0) {
                    console.log(res);
                } else {
                    console.log('error');
                }
            })
        };

        return {
            newComment,
            postComment
        };
    }
};
</script>
  
<style lang="scss">
.commit-input {
    display: flex;
    align-items: center;
    justify-content: center;

    .input {
        width: 180px;
        height: 30px;
        border-radius: 10px;
    }

    .send {
        margin-left: 6px;
        width: 40px;
        height: 30px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>